<template>
	<view class="upload">
		<view class="list">
			<view class="item interval" v-for="(item, index) in fileList" :key="index">
				<image class="file" :src="item" v-if="item"></image>
				<image v-if="showType!=2" @click="handleRemove(index)" class="icon-close" src="../../static/icon_close_disease_picture@2x.png"></image>
			</view>
			<view class="item"  @click="chooseImage" v-if="fileList.length < limit&&showType!=2"><image class="file" src="../../static/imges/icon_add_goods_picute@2x.png"></image></view>
		</view>
	</view>
</template>

<script>
import qiniuUploader from './qiniuUploader.js';
export default {
	props: {
		showType:{
			type: Number,
			default: 1
		},
		limit: {
			type: Number,
			default: 5
		},
		// url: {
		// 	type: String,
		// 	required: true
		// },
		name: {
			type: String,
			default: 'file'
		},
		formData: {
			type: Object,
			default() {
				return {};
			}
		},
		header: {
			type: Object,
			default() {
				return {};
			}
		},
		fileList: {
			type: Array|String,
			default() {
				return [];
			}
		},
		token: {
			type: String,
			default: ''
		},
		fileKey: {
			type: String,
			default: ''
		}
	},
	
	data() {
		return {
			imgKeyList: []
		};
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				success: chooseImageRes => {
					//          const uploadTask = uni.uploadFile({
					//            url: this.url,
					//            name: this.name,
					//            filePath: chooseImageRes.tempFilePaths[0],
					//            formData: this.formData,
					//            header: this.header,
					//            success: (uploadFileRes) => {
					//              this.$emit('on-success', JSON.parse(uploadFileRes.data))
					//            },
					//            fail: (err) => {
					//              this.$emit('on-error', err)
					//            }
					//          })
					//          uploadTask.onProgressUpdate((res) => {
					//            this.$emit('on-process', res)
					//          })

					for (var i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
						let file = chooseImageRes.tempFilePaths[i];
						let index = file.lastIndexOf('/');
						let len = file.length;
						let name = file.substring(index + 1, len);
						// 交给七牛上传

						qiniuUploader.upload(
							file,
							res => {
								// let inLen = this.selectNum - this.fileList.length;
								// if (inLen > 0) {
								// 	this.fileList.push(file);
								// 	this.imgKeyList.push(res.key);
								// }
								this.$emit('on-success', res); //将图片回传父页面
							},
							error => {
								this.$emit('on-error', error);
							},
							{
								region: 'SCN',
								key: this.fileKey,
								uptoken: this.token // 由其他程序生成七牛 uptoken
							},
							res => {
								//上传进度
								this.$emit('on-process', res);
							},
							cancel => {
								this.$emit('on-cancel', cancel);
								// 取消上传
							},
							() => {
								// `before` 上传前执行的操作
							},
							complete => {
								this.$emit('on-complete', complete);
								// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
							}
						);
					}
				}
			});
		},
		handleRemove(index) {
			this.$emit('on-remove', index);
		},
	
	}
};
</script>

<style lang="scss" scoped>
.upload {
	.list {
		display: flex;
		flex-wrap: wrap;
		.item {
			position: relative;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			border: 2rpx solid #d9d9d9;
			background-color: #f3f3f3;
			margin-bottom: 20rpx;
			
			&.interval {
				margin-right: 16rpx;
				// margin-right: 50rpx;
				border: none;
			}
			.file {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
				margin: 0;
			}
			.icon-close {
				// border: 20rpx solid transparent;
				box-sizing: border-box;
				background-clip: padding-box;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				z-index: 999;
			}
			.icon {
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
}
</style>
